<template>
	<view class="container">
		<view class="warp u-m-t-20">

			<u-form :model="form" :rules="rules" ref="uForm" :errorType="errorType">
				<u-gap :bg-color="bgColor" :height="height" :required="required" :margin-top="marginTop"></u-gap>
				<u-form-item class="u-m-l-30 u-m-r-30" :required="required" label-width="200" :label-position="labelPosition" label="名称"
				 prop="name">
					<u-input :border="border" placeholder="请输入" v-model="form.name" type="text" input-align="right"></u-input>
				</u-form-item>
				<u-form-item class="u-m-l-30 u-m-r-30" :required="required" :label-width="200" :label-position="labelPosition"
				 :border-bottom="true" label="团长地域" prop="leaderArea">
					<!-- <u-input type="select" :select-open="selectShowQydz" v-model="form.leaderArea" placeholder="请选择" placeholderStyle="color: #0D1D36;"
					 input-align="right" @click="selectShowQydz = true"></u-input> -->
					  <view style="width:100%;text-align: right;" @click="cityActive = true">{{form.leaderArea || "请选择"}}</view>
				</u-form-item>
				<u-form-item class="u-m-l-30 u-m-r-30" :required="required" :label-width="200" :label-position="labelPosition"
				 :border-bottom="true" label="团队类型" prop="teamType">
					<view style="width:100%;text-align: right;" @click="choooseType">{{form.teamType || "请选择"}}</view>				
				</u-form-item>
				<u-form-item class="u-m-l-30 u-m-r-30" :required="required" :label-width="200" :label-position="labelPosition"
				 :border-bottom="true" label="团队数量" prop="num">
					<u-input :border="border" type="number" v-model="form.num" placeholder="请输入" placeholderStyle="color: #0D1D36;"
					 input-align="right"></u-input>
				</u-form-item>
				<u-form-item class="u-m-l-30 u-m-r-30" :label-position="labelPosition" label="诚信保证金" label-width="400" prop="zsbzj">
					<u-radio-group v-model="form.zsbzj" @change="checkboxGroupChange" :width="radioCheckWidth" :wrap="radioCheckWrap">
						<u-radio shape="square"  v-model="item.checked" v-for="(item, index) in checkboxListTwo" :key="index" :name="item.name">{{ item.name }}</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item v-if="zsbzj" class="u-m-l-30 u-m-r-30" label-width="200" :label-position="labelPosition" label="" prop="integrityDeposit">
					<u-input :border="border" placeholder="请输入保证金金额  元" v-model="form.integrityDeposit" type="text" input-align="right"></u-input>
				</u-form-item>
				<block v-if="model.wxy == '学习团队'">
					<u-form-item class="u-m-l-30 u-m-r-30" :required="required" :label-width="200"
						 :label-position="labelPosition" :border-bottom="true" label="课程分类" prop="fblx">
							<view style="width:100%;text-align: right;" @click="mSelect">{{form.kcfl || "请选择"}}</view>
						</u-form-item>
						<block v-if="form.kcfl == '专家课程' || form.kcfl == '牛人课程'">
						<!-- 	<u-form-item class="u-m-l-30 u-m-r-30" :label-width="200" label="产业" prop="industry">
								<view style="width:100%;text-align: right;" @click="cySelect">{{form.industry || "请选择"}}</view>
							</u-form-item> -->
							<u-form-item class="u-m-l-30 u-m-r-30" :required="required" :label-width="200" :label-position="labelPosition"
							 :border-bottom="true" label="专业方向" prop="specialty">
								<view style="width:100%;text-align: right;" @click="zySelect">{{form.specialty || "请选择"}}</view>
							</u-form-item>
							<u-form-item class="u-m-l-30 u-m-r-30" :required="required" :label-width="200" :label-position="labelPosition"
							 :border-bottom="true" label="课程内容" prop="kcnr">
								<view style="width:100%;text-align: right;" @click="kcnrSelect">{{form.kcnr || "请选择"}}</view>
							</u-form-item>
					
						</block>
						<block v-if="form.kcfl == '高校课堂'">
							<u-form-item class="u-m-l-30 u-m-r-30" :required="required" :label-width="200" :label-position="labelPosition"
							 :border-bottom="true" label="专业方向" prop="specialty">
							<view style="width:100%;text-align: right;" @click="zySelect">{{form.specialty || "请选择"}}</view>
							</u-form-item>
						</block>
						<block v-if="form.kcfl == '培训机构课堂'">
							<u-form-item class="u-m-l-30 u-m-r-30" :required="required" :label-width="200" :label-position="labelPosition"
							 :border-bottom="true" label="阶段" prop="specialty">
								<view style="width:100%;text-align: right;" @click="pxjgShow = true">{{form.jd || "请选择"}}</view>
							</u-form-item>
						</block>
						<block v-if="form.kcfl == '职业教育培训'">
							<u-form-item class="u-m-l-30 u-m-r-30" :required="required" :label-width="200" :label-position="labelPosition"
							 :border-bottom="true" label="培训方向" prop="specialty">
								<view style="width:100%;text-align: right;" @click="pxfxSelect">{{form.pxfx || "请选择"}}</view>
							</u-form-item>
						</block>
					<u-form-item class="u-m-l-30 u-m-r-40" :label-width="200" :label-position="labelPosition" :border-bottom="false"
					 label="时间预告" prop="sjyg">
						<u-input :border="border" @click="showDate = true" placeholder="请选择" v-model="form.sjyg" type="text" input-align="right"></u-input>
						<u-calendar v-model="showDate" ref="calendar" @change="changeDate" mode="date" :start-text="startText" :end-text="endText"
						 :range-color="rangeColor" max-date="2022-10-01" :range-bg-color="rangeBgColor" :active-bg-color="activeBgColor">
						</u-calendar>
					</u-form-item>
				</block>
				
				<u-gap :bg-color="bgColor" :height="height" :required="required" :margin-top="marginTop" :margin-bottom="marginBottom"></u-gap>
				<view class="qtsm u-m-l-40 u-m-r-30 u-m-t-40">
					<image src="../../../static/img/releasesm.png" style="width: 29rpx; height: 29rpx;" mode=""></image>
					<text class="hz">简短说明</text>
				</view>
				<u-form-item class="  zwpj u-m-l-30 u-m-r-30 "  :label-position="labelPosition" prop="remarks">
					<u-input type="textarea" :border="border" placeholder="请输入简短说明" v-model="form.remarks" />
				</u-form-item>
			</u-form>
		</view>
		<view class="warp u-m-t-20 u-p-30">
			<u-button class="button" @click="submit">确定</u-button>
			<!--弹出框-->
			<u-select mode="single-column" :list="fwnrList" v-model="selectShowFwnr" @confirm="selectConfirmFwnr"></u-select>
			<u-select mode="single-column" :list="tdrsList" v-model="selectShowTdrs" @confirm="selectConfirmTdrs"></u-select>
			<u-select mode="single-column" :list="rzfsList" v-model="selectShowRzfs" @confirm="selectConfirmRzfs"></u-select>
			<!-- <u-select mode="single-column" :list="selectList" v-model="selectShowQylx" @confirm="selectConfirmQylx"></u-select>
			<u-select mode="single-column" :list="selectList" v-model="selectShowQydy" @confirm="selectConfirmQydy"></u-select>
			<u-select mode="single-column" :list="selectList" v-model="selectShowLyxy" @confirm="selectConfirmLyxy"></u-select>
			<u-select mode="single-column" :list="dataList" v-model="selectShowPpsx" @confirm="selectConfirmPpsx"></u-select> -->
			<u-select :default-value="defaultValue" v-model="selectShowQydz" mode="mutil-column-auto" value-name="value" label-name="name" child-name="submenu" :list="listCitys" @confirm="confirmCity"></u-select>
			<!-- <u-select v-model="showType" mode="single-column" :list="typeList" @confirm="confirmTdlx"></u-select> -->
			<TriTree ref="triTree" :range="fetchDict.group_type" confirmColor="rgb(41, 121, 255)" @confirm="function(e){return setChooseType(e,'teamType')}"></TriTree>
			 <TriTree ref="ptriTree" :range="fetchDict.financing_cooperation_project_category" @confirm="function(e){return psetChooseType(e,'specialty')}"></TriTree>
			<TriTree ref="kctriTree" :multiple="false" :range="fetchDict.curriculum_promotion" @confirm="function (e){return setChooseType(e,'kcfl')}"></TriTree>
			
			<TriTree ref="kcnrTree" :range="fetchDict.course_content" @confirm="function (e){return setChooseType(e,'kcnr')}"></TriTree>
			<TriTree ref="pxfxTree" :range="fetchDict.direction_training" @confirm="function (e){return setChooseType(e,'pxfx')}"></TriTree>
			<city-select v-model="cityActive" @city-change="cityChange"></city-select>
			<!--弹出框-->
		</view>
	</view>
</template>
<script>
	import TriTree from '@/components/tki-tree/tki-tree.vue'
	import citySelect from '@/components/u-city-select.vue'
	export default {
		components:{
			citySelect,
				TriTree
		},
		data() {
			let that = this;			
			return {
				cityActive: false,
				zsbzj: false,
				selectListTeam:[],
				selectShowTeam:false,
				lbshow:false,
				ywhzs:["办公场地合作","产业链对接","产品展示合作"],
				ywindex:0,
				pxjgShow:false,
				sindex:0,
				sfs:["企业","团队","个人","政府"],
				pxfxShow:false,
				//选择城市
				selectShowQydz: false,
				showCity: false,
				defaultValue: [3],
				listCitys: [],
				typeList: [
					{
						label:'张三',
						value:'zs',
						children:[
							{
								label:'z1',
								value:'z1'
							}
						]
					},
					{
						label:'李四',
						value:'ls',
						children:[
							
						]
					}
			
				],
				form:{},
				show: false,
				showineed: false,
				showType: false,
				categorys: ["方舟工程", "法律服务"],
				fetchDict: [],
				defaultValue1: [2],
				listXmlbs: [],
				showDate: false,
				mode: 'range',
				result: "开始时间   至   结束时间",
				startText: '开始',
				endText: '结束',
				rangeColor: '#2979ff',
				rangeBgColor: 'rgba(41,121,255,0.13)',
				activeBgColor: '#2979ff',
				height: 20,
				bgColor: this.$u.color.bgColor,
				marginTop: 30,
				marginBottom: 30,
				btnType: 'primary',
				reqBody: {},
				pattern: '',
				typeIndex: 0,
				/**
				 * form验证
				 * */
				model: {},
				startTime: '',
				endTime: '',
				selectList: [

				],
				tdrsList: [{
						value: '1',
						label: '1'
					},
					{
						value: '2',
						label: '2'
					},
					{
						value: '3',
						label: '3'
					},
					{
						value: '4',
						label: '4'
					},
					{
						value: '20',
						label: '20'
					},
					{
						value: '100',
						label: '100'
					},
					{
						value: '100',
						label: '100'
					}
				],
				fwnrList: [{
						value: '施工配合',
						label: '施工配合'
					},
					{
						value: '方案配合',
						label: '方案配合'
					},
					{
						value: '现场调研',
						label: '现场调研'
					},
					{
						value: '机械设备',
						label: '机械设备'
					},
					{
						value: '交通出行',
						label: '交通出行'
					},
					{
						value: '监理配合',
						label: '监理配合'
					},
					{
						value: '竣工验收',
						label: '竣工验收'
					}
				],
				jzjdList: [{
						value: '全部',
						label: '全部'
					},
					{
						value: '可研',
						label: '可研'
					},
					{
						value: '招标',
						label: '招标'
					},
					{
						value: '勘察',
						label: '勘察'
					},
					{
						value: '设计',
						label: '设计'
					},
					{
						value: '采购',
						label: '采购'
					},
					{
						value: '施工',
						label: '施工'
					},
					{
						value: '监理',
						label: '监理'
					},
					{
						value: '预算',
						label: '预算'
					},
					{
						value: '设备安装',
						label: '设备安装'
					},
					{
						value: '装饰装修',
						label: '装饰装修'
					},
					{
						value: '竣工验收',
						label: '竣工验收'
					},
					{
						value: '其他',
						label: '其他'
					}
				],
				rzfsList: [{
						value: '资金入股',
						label: '资金入股'
					},
					{
						value: '借贷',
						label: '借贷'
					},
					{
						value: '其他',
						label: '其他'
					}
				],
				rules: {
					xmmc: [{
						required: false,
						message: '请输入项目名称',
						trigger: 'blur'
					}],
					region: [{
						required: false,
						message: '请选择地域',
						trigger: 'change'
					}],
					fwnr: [{
						required: false,
						message: '请选择服务内容',
						trigger: 'change'
					}],
					xmlb: [{
						required: false,
						message: '请选择项目类别',
						trigger: 'change'
					}],
					xmcc: [{
						required: false,
						message: '请输入项目层次',
						trigger: 'blur'
					}],
					ydmj: [{
						required: false,
						message: '请输入用地面积',
						trigger: 'blur'
					}],
					jzmj: [{
						required: false,
						message: '请输入建筑面积',
						trigger: 'blur'
					}],
					zzyq: [{
						required: false,
						message: '请输入资质要求',
						trigger: 'blur'
					}],
					// tdlx: [
					// 	{
					// 		required: false,
					// 		message: '请选择团队类型',
					// 		trigger: 'change'
					// 	}
					// ],
					cjzt: [{
						required: false,
						message: '请选择任意一个承接主体',
						trigger: 'change'
					}],
					tdrs: [{
						required: false,
						message: '请选择团队人数',
						trigger: 'change'
					}],
					rzgm: [{
						required: false,
						message: '请输入融资规模',
						trigger: 'blur'
					}],
					// pbgjz: [
					// 	{
					// 		required: false,
					// 		message: '请输入屏蔽关键字',
					// 		trigger: 'blur'
					// 	}
					// ],
					sjap: [{
						required: false,
						message: '请选择时间安排',
						trigger: 'change'
					}],
					jdsm: [{
						required: false,
						message: '请输入简短说明',
						trigger: 'blur'
					}]
				},
				checkboxList: [{
						name: '企业',
						checked: false,
						disabled: false
					},
					{
						name: '团队',
						checked: false,
						disabled: false
					},
					{
						name: '无',
						checked: false,
						disabled: false
					},
				],
			checkboxListTwo: [
			
				{
					name: '需要',
					checked: false,
					disabled: false
				},
				{
					name: '不需要',
					checked: false,
					disabled: false
				},
			],
				required: false,
				border: false,
				check: false,
				selectStatus: 'close',
				selectShowDy: false,
				selectShowFwnr: false,
				selectShowTdlx: false,
				selectShowJzjd: false,
				selectShowRzfs: false,
				selectShowLyxy: false,
				selectShowTdrs: false,
				radio: '',
				radio1: '',
				radioCheckWidth: 'auto',
				radioCheckWrap: false,
				labelPosition: 'left',
				codeTips: '',
				errorType: ['toast'],
				/**/

				/**
				 * 数字统计
				 * */
				startVal: 500,
				endVal: 500,
				separator: ',',
				decimals: 0,
				duration: 2000,
				autoplay: true,
				useEasing: true,
				current: 3,
				isStop: false,
				bold: false,
				fontSize: 24,
				color: '#fff',
				/**/
				keyIndex: 0,
				keywords: [{
					name: '企业',
					selected: true
				}, {
					name: '设计师',
					selected: false
				}, {
					name: '监理',
					selected: false
				}, {
					name: '大型企业',
					selected: false
				}, {
					name: '采购',
					selected: false
				}, {
					name: '监理',
					selected: false
				}]
			};
		},
		mounted() {},
		computed: {

		},
		onShow() {
			// this.dictionaryFetchDict('group_type');
			// this.wsDictionary();
			// this.wxyDictionary();
			// this.wyxDictionary();
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad(options) {
			const userInfo = uni.getStorageSync("userInfo")
			console.log('userInfo', userInfo)
			this.categorys = userInfo.identityType == 0 ? ['法律服务'] : ["方舟工程", "法律服务"]
			if (options.row) {
				this.model = JSON.parse(decodeURIComponent(options.row));
			}
			if (options.data) {
				this.model = JSON.parse(decodeURIComponent(options.data));

			}
			//获取省市区
			this.cityList();
			var keys = {'keys':['curriculum_promotion','group_type','course_content','financing_cooperation_project_category','direction_training']}
			this.dictionaryFetchDict(keys);		

		},
		methods: {	
			cityChange(e) {
				let address = e.province.label
				if(e.city){
					address = address + '-' + e.city.label;
				}
				if(e.area){
					address = address + '-' + e.area.label;
				}
				this.form.leaderArea = address
			},
			psetChooseType(item, type) {
				var column_array = this.$mUtils.array_column(item, 'label');
				var modelValue = column_array.join(',');
				this.form[type] = modelValue;
				this.$forceUpdate()
			},
			pxfxSelect(){				
				this.$refs.pxfxTree._show()
			},
			kcnrSelect() {
				this.$refs.kcnrTree._show()
				this.$forceUpdate()
			},
			zySelect() {
				this.$refs.ptriTree._show()
			},	
			mSelect() {
				this.$refs.kctriTree._show()
				this.$forceUpdate()
			},
			setChooseType(item, type) {
				var column_array = this.$mUtils.array_column(item, 'label');
				var modelValue = column_array.join(',');
				this.form[type] = modelValue;
				this.$forceUpdate()
			},
			choooseType(){
					this.$refs.triTree._show() 
			},
			bindPickerChange() {

			},
			confirm(e, list, type) {
				var itemKey = e[0];
				this.form[type] = list[itemKey];
			},
			confirmPCity(e) {
				this.form.leaderArea = '';
				e.map((val, index) => {
					this.form.leaderArea += this.form.leaderArea == '' ? val.label : '-' + val.label;
				})
			},
			async cityList() {
				let result = await this.$apis.findProvinceCityDistrictByTree();
				this.listCitys = result.data;
			},
			handleClickWeight(e) {
				var model = encodeURIComponent(JSON.stringify(this.model));
				let url = encodeURIComponent(JSON.stringify("release/bidding"));
				if (this.model.wyx == '企业') {
					uni.navigateTo({
						url: '../user/companyWeight?type=' + url + '&row=' + model
					})
				} else if (this.model.wyx == '团队') {
					uni.navigateTo({
						url: '../user/teamWeight?type=' + url + '&row=' + model
					})
				} else {
					uni.navigateTo({
						url: '../user/personWeight?type=' + url + '&row=' + model
					})
				}
			},
			confirmCity(e) {
				this.form.leaderArea = '';
				e.map((val, index) => {
					this.form.leaderArea += this.form.leaderArea == '' ? val.label : '-' + val.label;
				})
			},
			confirmTdlx(e) {
				this.form.teamType = '';
				e.map((val, index) => {
					this.form.teamType = val.label;
				})
			},
			async dictionaryFetchDict(keyWords) {
				let result = await this.$apis.fetchMultipleKey(keyWords);
				this.fetchDict = result.data;
			},
			// checkbox选择发生变化
			checkboxGroupChange(e) {
			// debugger
			if(e==="需要"){
				this.zsbzj = true;
			}else{
				this.zsbzj = false;
			}

			},
			// checkbox选择发生变化
			checkboxGroupChange1(e) {
				this.form.xhm = e;
				if (e === "是") {
					this.form.xhmTwo = 1;
				} else {
					this.form.xhmTwo = 0;
				}
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
						// this.insertProject();
						// this.matching();
						this.model.demand = this.form;
						var model = encodeURIComponent(JSON.stringify(this.model));
						//var type = this.pattern
						uni.navigateTo({
							url: '/pages/wisdomcommune/zhihuiTeam?data=' + model
						})
					} else {
						console.log('验证失败');
					}
				});

			},
			//招投标匹配并新增
			async matching() {
				try {
					let reqBody = {};
					// let bidding = {};
					// let param = {};
					reqBody['bidderId'] = this.$store.state.userInfo.id;
					reqBody['area'] = this.model.xmdd;
					reqBody['projectName'] = this.model.xmmc;
					reqBody['type'] = this.model.xmcc;
					reqBody['stage'] = this.model.xmjd;
					reqBody['requires'] = this.model.zzyq;
					reqBody['startTime'] = this.startTime;
					reqBody['endTime'] = this.endTime;
					reqBody['identityType'] = this.model.cjztTwo;
					reqBody['isRebate'] = this.model.xhmTwo;
					reqBody['bestKey'] = this.model.gjz;
					reqBody['blackKey'] = this.model.pbgjz;
					reqBody['remarks'] = this.model.qtsm;
					reqBody['iam'] = this.model.ws;
					reqBody['mode'] = this.model.wyx;
					reqBody['ineed'] = this.model.wxy;
					// reqBody['bidding'] = bidding;
					// reqBody['param'] = param;
					let data = await this.$apis.biddingMatching(reqBody);
					if (data.code == 200) {
						uni.showToast({
							title: "招投标匹配成功",
							icon: 'none'
						});
						setTimeout(() => {
							this.$mRouter.switchTab({
								route: this.$mRoutesConfig.message
							});
						}, 2000)

					} else {
						uni.showToast({
							title: result.msg,
							icon: 'none'
						});
						return;
					}
				} catch (e) {
					console.log(e);
					this.submitBtnDis = false;
				}
			},
			// //查询匹配 我是  字典数据
			// async wsDictionary(){
			// 	let reqBody = {};
			// 	reqBody['primary'] = "招投标";
			// 	reqBody['secondary'] = "我是";
			// 	let result = await this.$apis.findMatchingDictionary(reqBody);
			// 	let list = result.data;
			// 	for (let i = 0; i < list.length; i++) {
			// 		let wsValue = {};
			// 		wsValue['value'] = list[i].name;
			// 		wsValue['label'] = list[i].name;
			// 		this.wsList.push(wsValue)
			// 	}
			// },
			// //查询匹配 我需要  字典数据
			// async wxyDictionary(){
			// 	let reqBody = {};
			// 	reqBody['primary'] = "招投标";
			// 	reqBody['secondary'] = "我需要";
			// 	let result = await this.$apis.findMatchingDictionary(reqBody);
			// 	let list = result.data;
			// 	for (let i = 0; i < list.length; i++) {
			// 		let wxyValue = {};
			// 		wxyValue['value'] = list[i].name;
			// 		wxyValue['label'] = list[i].name;
			// 		this.wxyList.push(wxyValue)
			// 	}
			// },
			// //查询匹配 我意向  字典数据
			// async wyxDictionary(){
			// 	let reqBody = {};
			// 	reqBody['primary'] = "招投标";
			// 	reqBody['secondary'] = "我意向";
			// 	let result = await this.$apis.findMatchingDictionary(reqBody);
			// 	let list = result.data;
			// 	for (let i = 0; i < list.length; i++) {
			// 		let wyxValue = {};
			// 		wyxValue['value'] = list[i].name;
			// 		wyxValue['label'] = list[i].name;
			// 		this.wyxList.push(wyxValue)
			// 	}
			// },
			selectKey(e) {
				this.keywords[e].selected = !this.keywords[e].selected;
			},
			// 选择
			selectConfirmFwnr(e) {
				this.model.fwnr = '';
				e.map((val, index) => {
					this.model.fwnr += this.model.fwnr == '' ? val.label : '-' + val.label;
				});
			},
			selectConfirmTdrs(e) {
				this.model.tdrs = '';
				e.map((val, index) => {
					this.model.tdrs += this.model.tdrs == '' ? val.label : '-' + val.label;
				});
			},
			selectConfirmRzfs(e) {
				this.model.rzfs = '';
				e.map((val, index) => {
					this.model.rzfs += this.model.rzfs == '' ? val.label : '-' + val.label;
				});
			},
			selectConfirmQylx(e) {
				this.model.qylx = '';
				e.map((val, index) => {
					this.model.qylx += this.model.qylx == '' ? val.label : '-' + val.label;
				});
			},
			selectConfirmQydy(e) {
				this.model.qydy = '';
				e.map((val, index) => {
					this.model.qydy += this.model.qydy == '' ? val.label : '-' + val.label;
				});
			},
			selectConfirmPpsx(e) {
				this.model.ppsx = '';
				e.map((val, index) => {
					this.model.ppsx += this.model.ppsx == '' ? val.label : '-' + val.label;
				});
			},
			change(e) {
				if (this.mode == 'range') {
					this.model.sjap = e.startDate + " - " + e.endDate;
					this.startTime = e.startDate;
					this.endTime = e.endDate;
				} else {
					this.model.sjap = e.result;
				}
			},
			changeDate(e) {
				this.model.sjyg = e.result;
			},

			dianji() {
				this.show = true;
			}
		}
	};
</script>
<style scoped lang="scss">
	// 上下滑动
	.scroll-Y {
		height: 300rpx;

		.scroll-view-item {
			height: 300rpx;
			width: 100%;
		}
	}

	// 左右滑动
	.scroll-view_H {
		height: 400rpx;
		width: 100%;
		white-space: nowrap; // 滚动必须加的属性
		border: 1px #007aff solid;

		.scroll-view-item_H {
			height: 300rpx;
			width: 40%;
			margin-right: 20rpx;
			display: inline-block;
			vertical-align: top;
		}
	}

	page {
		// background: #f5f5f9;
	}

	.warp {
		background: #fff;
	}

	.count {
		.count-to {
			font-size: 24rpx;
		}

		text {
			padding: 2rpx 12rpx;
			background: #ff9e21;
			color: #ffffff;
			font-size: 24rpx;
		}
	}

	.group {
		padding: 6rpx 21rpx;
		background: #f1f7ff;
		border-radius: 6rpx;
		margin: 30rpx 30rpx 0 30rpx;
	}

	.button {
		width: 662rpx;
		margin: 145rpx auto 65rpx auto;
		background: #ab61ff;
		border-radius: 40rpx;
		border: 0;
		color: #fff;

		&.u-hairline-border:after {
			border: 0;
		}
	}

	.fgx {
		width: 100%;
		height: 20rpx;
		background-color: #F5F5F9;
		margin-top: 40rpx;
	}

	.wdztc {
		width: 190rpx;
		height: 56rpx;
		background: rgba(171, 97, 255, 0.15);
		border: 2rpx dashed #AB61FF;
		border-radius: 6rpx;
		color: #AB61FF;
		font-size: 28rpx;
		text-align: center;
		line-height: 56rpx;
		margin-top: 40rpx;
		margin-left: 280rpx;
	}

	.qtsm {
		display: flex;
		align-items: center;

		.hz {
			color: #0D1D36;
			font-size: 30rpx;
			margin-left: 15rpx;
		}
	}

	.zwpj {
		width: 690rpx;
		height: 260rpx;
		background-color: #F5F5F9;
		margin-top: 40rpx;
		font-size: 30rpx;
		color: #F5F5F9;
		border-radius: 10rpx;
		line-height: 44rpx;
	}
</style>
